<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 圆角边框 */
            /* border-radius: 50%; */
            background-color:red;
            /* 2.使用动画 */
            /* 动画名字 */
            animation-name: rotate;
            /* 动画持续的时长 */
            animation-duration: 0.8s;
            /* 设置动画的速度曲线 ease ease-in/out ease-in-out*/
            animation-timing-function: linear;
            /* 设置动画的迭代次数 n infinite*/
            animation-iteration-count:infinite ;
            /* 设置动画的执行方向是否反向执行 alternate */
            animation-direction: alternate;


        }
        
        /* 1.定义动画关键帧 */
        @keyframes move {
            from{
                /* 左外边距 */
              margin-left: 0px;
            }
            to{
                margin-left: 200px;

            }
            /* 0% 25% 50% 75% 100% */
            
        }
        @keyframes rotate {
            from{
             border-radius: 0%;   
             background-color: red;
             /* 形变属性 可以设置平移 设置旋转 设置缩放 */
            transform:translateX(0px) rotate(0deg);

            }
            to{
                border-radius: 50%;
                background-color: pink;
                transform: translateX(200px) rotate(360deg);
            }
            
        }
        @keyframes pound{
        from{
            transform: scale(0.8s);
        }
        to{
            transform: scale(1.2);
        }
    }
    </style>
</head>
<body>
    <div></div>
    <br>
    <img width="100px" src="https://img2.baidu.com/it/u=1021500905,3574445054&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719421200&t=0aec01ac2d0a03d2f6ab3b0bc26a66fc">
    
</body>
</html>